<template>
  <div class="page device-page">
    <div class="page-title-box card-wrapper">
      <span class="page-title-text">飞手管理</span>
      <div class="page-title-options">
        <a-button type="primary" @click="handlePopCreateModal">添加飞手</a-button>
      </div>
    </div>
    <div class="page-list-content card-wrapper">
      <a-table :data-source="tableData" :columns="columns" :pagination="false">
        <template #bodyCell="{record, column}">
          <template v-if="column.dataIndex === 'year'">
            <span>{{record.yearDuration}}分钟/{{record.yearDistance}}km/{{record.yearCount}}架次</span>
          </template>
          <template v-if="column.dataIndex === 'total'">
            <span>{{record.totalDuration}}分钟/{{record.totalDistance}}km/{{record.totalCount}}架次</span>
          </template>
          <template v-if="column.dataIndex === 'sex'">
            <span v-if="record.sex === SexType.Male">男</span>
            <span v-if="record.sex === SexType.Female">女</span>
          </template>
          <template v-if="column.dataIndex === 'status'">
            <span v-if="record.status === PersonStatus.Normal">正常</span>
            <span class="status-text-delete" v-if="record.status === PersonStatus.Deleted">已删除</span>
          </template>
          <template v-if="column.dataIndex === 'option'">
            <a-button type="link" @click="handlePopEditModal(record)" v-if="record.status !== PersonStatus.Deleted">编辑</a-button>
            <a-button type="link" danger v-if="record.status === PersonStatus.Normal" @click="setFlyerStatus(record, PersonStatus.Deleted)">删除</a-button>
            <a-button type="link" v-if="record.status === PersonStatus.Deleted" @click="setFlyerStatus(record, PersonStatus.Normal)">恢复</a-button>
          </template>
        </template>
      </a-table>
      <a-modal v-model:visible="modalVisible" width="40%" :title="editFlag ? '编辑飞手' : '添加飞手'" :footer="null">
        <a-form
            ref="formRef"
            :model="formState"
            name="basic"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
            autocomplete="off"
            @finish="onFinish">
          <a-form-item
              label="账户ID"
              name="accountId"
              :rules="[{ required: true, trigger: 'blur', message: '账户ID必填' }]">
            <a-input v-model:value="formState.accountId" />
          </a-form-item>
          <a-form-item
              label="姓名"
              name="name"
              :rules="[{ required: true, trigger: 'blur', message: '姓名必填' }]">
            <a-input v-model:value="formState.name" />
          </a-form-item>
          <a-form-item
              label="手机号"
              name="phone"
              :rules="[{ required: true, trigger: 'blur', message: '手机号必填' }]">
            <a-input v-model:value="formState.phone" />
          </a-form-item>
          <a-form-item
              label="年龄"
              name="age"
              :rules="[{ required: true, trigger: 'blur', message: '年龄必填' }]">
            <a-input-number v-model:value="formState.age" />
          </a-form-item>
          <a-form-item
              label="性别"
              name="sex"
              :rules="[{ required: true, trigger: 'change', message: '性别必填' }]">
            <a-select v-model:value="formState.sex">
              <a-select-option :value="SexType.Male">男</a-select-option>
              <a-select-option :value="SexType.Female">女</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
              label="年飞行时长(分钟)"
              name="yearDuration">
            <a-input-number v-model:value="formState.yearDuration" />
          </a-form-item>
          <a-form-item
              label="年飞行距离(km)"
              name="yearDistance">
            <a-input-number v-model:value="formState.yearDistance" />
          </a-form-item>
          <a-form-item
              label="年飞行架次"
              name="yearCount">
            <a-input-number v-model:value="formState.yearCount" />
          </a-form-item>
          <a-form-item
              label="总飞行时长(分钟)"
              name="totalDuration">
            <a-input-number v-model:value="formState.totalDuration" />
          </a-form-item>
          <a-form-item
              label="总飞行距离(km)"
              name="totalDistance">
            <a-input-number v-model:value="formState.totalDistance" />
          </a-form-item>
          <a-form-item
              label="总飞行架次"
              name="totalCount">
            <a-input-number v-model:value="formState.totalCount" />
          </a-form-item>
          <a-form-item
              label="所属租户"
              name="tenantName">
            <a-input v-model:value="formState.tenantName" />
          </a-form-item>
          <a-form-item
              label="租户ID"
              name="tenantId">
            <a-input v-model:value="formState.tenantId" />
          </a-form-item>
          <a-form-item
              label="备注"
              name="desc">
            <a-input v-model:value="formState.desc" />
          </a-form-item>
          <a-form-item
              label="状态"
              name="status">
            <a-select disabled allow-clear v-model:value="formState.status" >
              <a-select-option :value="PersonStatus.Normal" >正常</a-select-option>
              <a-select-option :value="PersonStatus.Deleted" >已删除</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <div class="btn-row">
              <a-button @click="modalVisible = false">取消</a-button>
              <a-button type="primary" html-type="submit">保存</a-button>
            </div>
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>

<script setup lang="ts">
import {nextTick, ref} from 'vue'
import {FlyerItem, SexType, PersonStatus, ResDto} from "../../types/common";
import flyerApi from '../../api/flyer/index';
import {message} from "ant-design-vue";

const modalVisible = ref(false)
const editFlag = ref(false)
const formRef = ref()
const formState = ref<FlyerItem>({
  id: '',
  accountId: '',
  account: '',
  name: '',
  phone: '',
  age: 0,
  sex: 1,
  duty: '',
  tenantId: '',
  tenantName: '',
  desc: '',
  yearDuration: 0,
  yearDistance: 0,
  yearCount: 0,
  totalDuration: 0,
  totalDistance: 0,
  totalCount: 0,
  status: PersonStatus.Normal
})
const tableData = ref<FlyerItem[]>([])
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },{
    title: '账户ID(uuid)',
    dataIndex: 'accountId',
    key: 'accountId',
  },{
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
  },{
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },{
    title: '性别',
    dataIndex: 'sex',
    key: 'sex',
  },{
    title: '年飞行时长/距离/架次',
    dataIndex: 'year',
    key: 'year',
  },{
    title: '总飞行时长/距离/架次',
    dataIndex: 'total',
    key: 'total',
  },{
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },{
    title: '操作',
    dataIndex: 'option',
    key: 'option',
  },

]
const getFlyerList = () => {
  flyerApi.getList().then((res: ResDto) => {
    if (res.data && res.data.length) {
      tableData.value = res.data
    }
  })
}
getFlyerList()

const setFlyerStatus = (record: FlyerItem, status: PersonStatus) => {
  flyerApi.edit({...record, status}).then((res: ResDto) => {
    if (res.code === 0) {
      message.success('操作成功')
      getFlyerList()
    } else {
      message.error(res.message)
    }
  }).catch((e: any) => {
    console.log(e)
    message.error('服务异常')
  })
}

const handlePopEditModal = (record: FlyerItem) => {
  editFlag.value = true
  formState.value = JSON.parse(JSON.stringify(record))
  modalVisible.value = true
  nextTick(() => {
    formRef.value.clearValidate()
  })
}
const handlePopCreateModal = () => {
  editFlag.value = false
  formState.value = {
    id: '',
    accountId: '',
    account: '',
    name: '',
    phone: '',
    age: 0,
    sex: 1,
    duty: '',
    tenantId: '',
    tenantName: '',
    desc: '',
    yearDuration: 0,
    yearDistance: 0,
    yearCount: 0,
    totalDuration: 0,
    totalDistance: 0,
    totalCount: 0,
    status: PersonStatus.Normal
  }
  modalVisible.value = true
  nextTick(() => {
    formRef.value.clearValidate()
  })
}
const onFinish = () => {
  let p
  if (editFlag.value) {
    p = flyerApi.edit(formState.value)
  } else {
    p = flyerApi.add(formState.value)
  }
  p.then((res) => {
    if (res.code === 0) {
      message.success('保存成功')
      modalVisible.value = false
      getFlyerList()
    } else {
      message.error(res.message)
    }
  }).catch((e: any) => {
    message.error('服务异常')
  })
}
</script>

<style scoped>

</style>
